<template>
  <div :class="item.config.class">
    <template v-if="item.config['model'] == 'appModel3'">
      <div class="package-model">
        <div class="package-btn-content flex-normal">
          <div class="left-btn flex-center" :prop-data="getModelItemConfig('listDesc_btnPrice')"
            :style="{
              'font-family': setAttr(item['listDesc_btnPrice'], 'fontFamily'),
              'font-size': item['listDesc_btnPrice'] ? $px2rem(`${item['listDesc_btnPrice'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['listDesc_btnPrice'], 'color'),
            }">
            <span :style="{'font-size': $px2rem('14px')}">特惠价</span>
						<span :style="{'font-size': $px2rem('30px')}">{{totalWFPrice}}</span>
						<span :style="{'font-size': $px2rem('14px')}">元</span>
          </div>
          <div class="right-btn flex-center" :prop-data="getModelItemConfig('listDesc_btnPackage')"
            :style="{
              'font-family': setAttr(item['listDesc_btnPackage'], 'fontFamily'),
              'font-size': item['listDesc_btnPackage'] ? $px2rem(`${item['listDesc_btnPackage'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['listDesc_btnPackage'], 'color'),
            }">
            享原价{{ totalPrice }}元服务
          </div>
        </div>
        <div class="package-main-content">
          <div class="col-item flex-column" v-for="(pack) in setList(list, 3)" :key="pack.id">
            <span class="col-label" :prop-data="getModelItemConfig('listTitle_normal')"
            :style="{
              'font-family': setAttr(item['listTitle_normal'], 'fontFamily'),
              'font-size': item['listTitle_normal'] ? $px2rem(`${item['listTitle_normal'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['listTitle_normal'], 'color'),
            }" @click.stop.prevent="editModel(item['listTitle_normal'])">{{pack.serveName}}</span>
            <div class="col-money flex-center">
              <span class="money-icon"  :prop-data="getModelItemConfig('listIcon_normal')"
                :style="{
                'font-family': setAttr(item['listIcon_normal'], 'fontFamily'),
                'font-size': item['listIcon_normal'] ? $px2rem(`${item['listIcon_normal'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['listIcon_normal'], 'color'),
              }" @click.stop.prevent="editModel(item['listIcon_normal'])">￥</span>
              <span class="money-num"  :prop-data="getModelItemConfig('listNum_normal')"
                :style="{
                'font-family': setAttr(item['listNum_normal'], 'fontFamily'),
                'font-size': item['listNum_normal'] ? $px2rem(`${item['listNum_normal'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['listNum_normal'], 'color'),
              }" @click.stop.prevent="editModel(item['listNum_normal'])">{{pack.price}}</span>
              <span class="money-desc"  :prop-data="getModelItemConfig('listDesc_normal')"
                :style="{
                'font-family': setAttr(item['listDesc_normal'], 'fontFamily'),
                'font-size': item['listDesc_normal'] ? $px2rem(`${item['listDesc_normal'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['listDesc_normal'], 'color'),
              }" @click.stop.prevent="editModel(item['listDesc_normal'])">价值</span>
            </div>
          </div>
        </div>
      </div>
      <div class="group-model">
        <div class="group-main-content">
          <div class="group-head flex-between" :prop-data="getModelItemConfig('title')"
            :style="{
              'font-family': setAttr(item['title'], 'fontFamily'),
              'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['title'], 'color'),
            }" @click.stop.prevent="editModel(item['title'])">
            <span class="head-item">累计份数：{{addUp}}</span>
            <span class="head-item">已售：{{sold}}</span>
          </div>
          <div class="group-list" :prop-data="getModelItemConfig('info')"
            :style="{
              'font-family': setAttr(item['info'], 'fontFamily'),
              'font-size': item['info'] ? $px2rem(`${item['info'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['info'], 'color'),
            }" @click.stop.prevent="editModel(item['info'])">
            <div class="group-item flex-between" v-for="(item, idx) in groupList" :key="idx">
              <span class="item-txt" v-if="!item.isTy">{{item.miniValue}}-{{item.maxValue}}人</span>
              <span class="item-txt" v-else>团购价</span>
              <span class="item-txt">{{item.price}}元/份</span>
            </div>
          </div>
        </div>
        <div v-if="completeIncome" class="group-desc" :prop-data="getModelItemConfig('desc')"
          :style="{
            'font-family': setAttr(item['desc'], 'fontFamily'),
            'font-size': item['desc'] ? $px2rem(`${item['desc'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['desc'], 'color'),
          }" @click.stop.prevent="editModel(item['desc'])">分享得现金：分享活动，并被购买，将获得{{completeIncome}}元现金奖励</div>
      </div>
    </template>
    <template v-if="item.config['model'] == 'appModel5'">
      <div class="model-5-content">
        <div class="title-content flex-center">
          <span :prop-data="getModelItemConfig('modelTitle')" 
            class="title-txt" @click.stop="editModel(item['modelTitle'])"
            :style="{
              'font-family': setAttr(item['modelTitle'], 'fontFamily'),
              'font-size': item['modelTitle'] ? $px2rem(`${item['modelTitle'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['modelTitle'], 'color'),
            }">{{ setAttr(item['modelTitle'], 'text')}}</span>
        </div>
        <div class="model-5-content-package">
          <div :class="['package-main-content', list.length <= 2 && 'center']" :prop-data="getModelItemConfig('list_normal')" 
            :style="{
              'font-family': setAttr(item['list_normal'], 'fontFamily'),
              'font-size': item['list_normal'] ? $px2rem(`${item['list_normal'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['list_normal'], 'color'),
            }" @click.stop.prevent="editModel(item['list_normal'])">
            <div class="col-item flex-column" v-for="(pack) in setList(list, 3)" :key="pack.id">
              <span class="col-label">{{pack.serveName}} * {{ pack.itemNum }}</span>
              <span class="moeny-line"></span>
              <div class="col-money flex-center">
                <span class="money-num">价值{{pack.price}}</span>
              </div>
            </div>
          </div>
          <div class="package-total-content">
            <span class="total-txt" :prop-data="getModelItemConfig('listTotal_normal')"
            @click.stop="editModel(item['listTotal_normal'])"
            :style="{
              'font-family': setAttr(item['listTotal_normal'], 'fontFamily'),
              'font-size': item['listTotal_normal'] ? $px2rem(`${item['listTotal_normal'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['listTotal_normal'], 'color'),
            }"> 现在下单即享以下项目，总价值{{totalPrice}}元 </span>
            <div class="total-image-content flex-column">
              <span class="image-label">特惠价</span>
              <div class="image-val">
                <span class="val-unit">￥</span>
                <span class="val-num">{{totalWFPrice}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="group-model">
          <div class="group-main-content">
            <div class="group-head flex-between" :prop-data="getModelItemConfig('title')"
              :style="{
                'font-family': setAttr(item['title'], 'fontFamily'),
                'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['title'], 'color'),
              }" @click.stop.prevent="editModel(item['title'])">
              <span class="head-item">累计份数：{{addUp}}</span>
              <span class="head-item">已售：{{sold}}</span>
            </div>
            <div class="group-list" :prop-data="getModelItemConfig('info')"
              :style="{
                'font-family': setAttr(item['info'], 'fontFamily'),
                'font-size': item['info'] ? $px2rem(`${item['info'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['info'], 'color'),
              }" @click.stop.prevent="editModel(item['info'])">
              <div class="group-item flex-between" v-for="(item, idx) in groupList" :key="idx">
                <span class="item-txt" v-if="!item.isTy">{{item.miniValue}}-{{item.maxValue}}人</span>
                <span class="item-txt" v-else>团购价</span>
                <span class="item-num flex-center">{{item.price}}元/份</span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="completeIncome" class="package-desc" :prop-data="getModelItemConfig('desc')"
          :style="{
            'font-family': setAttr(item['desc'], 'fontFamily'),
            'font-size': item['desc'] ? $px2rem(`${item['desc'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['desc'], 'color'),
          }" @click.stop.prevent="editModel(item['desc'])">分享得现金：分享活动，并被购买，将获得{{completeIncome}}元现金奖励</div>

      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin'
import { groupModel } from '@/formgen/components/FormConfig/model-config'
import {getGroupBuying} from '@/formgen/api/index'
import {getTcList} from '@/formgen/api/index'
import { mapGetters } from 'vuex'

export default {
  name: 'DGroupPackage',
  mixins: [mixin],
  computed: {
    ...mapGetters(['vuex_activity']),
    completeIncome(){
      let {completeIncome, whetherToShare} = this.vuex_activity
      if(!whetherToShare) return false
      return completeIncome
    },
  },
  data(){
    return {
      groupModel: JSON.parse(JSON.stringify(groupModel)),
      groupList: [],
      sold: '0',
      addUp: '0',
      list: [],
      totalPrice: 0,
      totalWFPrice: 0
    }
  },
  mounted(){
    let _self = this
    _self.getTcList()
    _self.getGroupInfo()
  },
  methods: {
    setList(list, num){
      let len = list.length
      // if(len > num){
      //   return list.slice(0, num)
      // }
      return list
    },
    setAttr(config, key){
      if(!config) return null
      return config.configH5[key]
    },
    getModelItemConfig(key){
      let _self = this
      let {model} = _self.item.config
      let config = _self.item[key] || _self.packageModel[model][key]
      _self.$set(_self.item, key, config)
    },
    editModel(item){
      this.$emit('edit-model', item)
    },
    getGroupInfo(){
      let _self = this
      let {id = ''} = _self.$route.params
      getGroupBuying(id || this.vuex_activity['id']).then(res => {
        let {addUp, groupBuying, sold, groupBuyingPrice} = res.data
        _self.sold = sold
        _self.addUp = addUp
        if(groupBuying){
          _self.groupList = groupBuying
        }else{
          _self.groupList = [{isTy: true, price: groupBuyingPrice}]
        }
      })
    },
    getTcList(){
      let _self = this
      let {id = ''} = _self.$route.params
      getTcList(id || _self.activeId).then(res => {
        let {serveList, writeOffPrice = '0.00'} = res.data || {}
        _self.list = serveList || []
        _self.totalWFPrice = parseFloat(writeOffPrice)
        _self.list.forEach(i => {
          _self.totalPrice += parseFloat(i.price)
        })
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .app-model-3.group-package-model{
    .group-model{
      position: relative;
      .group-main-content{
        padding: 0 rem(65) rem(40);
        border: rem(1) solid #F0CAA6;
        border-radius: rem(20);
        position: relative;
        overflow: hidden;
        &::before, &::after{
          content: '';
          position: absolute;
          width: rem(60);
          height: rem(60);
          border: rem(1) solid #F0CAA6;
          border-radius: 50%;
          top: rem(100);
        }
        &::before{
          left: rem(-30);
        }
        &::after{
          right: rem(-30);
        }
        .group-head{
          padding: rem(50) 0;
        }
        .group-list{
          padding-top: rem(30);
          border-top: rem(1) solid #F0CAA6;
          .group-item{
            background-color: #fff;
            height: rem(68);
            border-radius: rem(33);
            margin-bottom: rem(20);
            padding: 0 rem(30);
            &:last-child{
              margin-bottom: 0;
            }
          }
        }
      }
      .group-desc{
        margin-top: rem(30);
      }
    }
    .package-model{
      position: relative;
      padding: rem(20) 0;
      .package-btn-content{
        .left-btn{
          width: rem(310);
          height: rem(98);
          background: url('/static/image/app-model-3/btn-1.png') no-repeat center;
          background-size: contain;
          border-radius: 0 0 rem(49) rem(49);
        }
        .right-btn{
          width: rem(310);
          height: rem(98);
          background: url('/static/image/app-model-3/btn-2.png') no-repeat center;
          background-size: contain;
          flex: 1;
        }
      }
      .package-main-content{
        padding: rem(44) 0 rem(30);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: rem(20);
        .col-item{
          position: relative;
          height: rem(208);
          background: url('/static/image/app-model-3/package-normal-bg.png') no-repeat center;
          background-size: contain;
          .col-label{
            position: absolute;
            left: rem(20);
            right: rem(20);
            top: rem(25);
            text-align: center;
          }
          .col-money{
            position: absolute;
            left: rem(20);
            right: rem(20);
            top: rem(120);
            .money-icon{
              font-weight: 500;
            }
            .money-num{
              font-weight: 500;
            }
            .money-desc{
              font-weight: 500;
              writing-mode: tb-rl;
            }
          }
        }
      }
      .package-desc{
        font-size: rem(24);
        color: #FECD8B;
      }
    }
  }
  .app-model-5.group-package-model{
    .model-5-content{
      border-radius: rem(10);
      box-shadow: rem(3) 0 rem(7) 0 #1863B2;
      .title-content{
        height: rem(137);
        background: url('/static/image/app-model-5/title-bg.png') no-repeat center;
        background-size: contain;
        font-weight: bold;
      }
      .package-desc{
        line-height: 2.4;
        padding: 0 rem(30);
      }
    }
    .model-5-content-package{
      .package-main-content{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: rem(20);
        background: linear-gradient(to top, #D1EEFE, #FFFFFF);
        margin: rem(30);
        border-radius: rem(12);
        border: rem(1) solid #3288CE;
        font-weight: bold;
        justify-content: space-around;
        padding: rem(15) 0;
        align-items: center;
        justify-items: center;
        &.center{
          grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
          .col-item:nth-child(n)::after{
            display: none;
          }
        }
        .col-item{
          text-align: center;
          padding: rem(20) rem(20);
          position: relative;
          .moeny-line{
            border-bottom: 1px dotted #3288CE;
            width: 100%;
            margin: rem(20) 0 rem(30) 0;
          }
          &:nth-child(3n)::after{
            display: none;
          }
          &::after{
            content: '';
            position: absolute;
            height: rem(160);
            border-right: 1px dotted #3288CE;
            top: 50%;
            transform: translateY(-50%);
            right: rem(-10.5);
          }
        }
      }
      .package-total-content{
        margin: rem(30) 0;
        padding: 0 rem(30);
        position: relative;
        .total-image-content{
          position: absolute;
          background: url('/static/image/app-model-5/th-bg.png') no-repeat center;
          background-size: contain;
          width: rem(160);
          height: rem(130);
          right: 0;
          top: rem(-80);
          text-align: center;
          color: #97651B;
          align-items: center;
          justify-content: center;
          .image-label{
            font-size: rem(24);
          }
          .val-unit{
            font-size: rem(24);
          }
          .val-num{
            font-size: rem(40);
            font-weight: bolder;
          }
        }
      }
    }
    .group-model{
      position: relative;
      padding-bottom: rem(20);
      .group-main-content{
        position: relative;
        margin: rem(50) rem(30) rem(30);
        border-top: rem(1) dotted #3288CE;
        .group-head{
          padding: rem(50) 0;
          font-weight: 500;
        }
        .group-list{
          .group-item{
            height: rem(80);
            border-radius: rem(10);
            margin-bottom: rem(20);
            padding: 0 rem(30);
            border: rem(1) solid #3288CE;
            &:last-child{
              margin-bottom: 0;
            }
          }
          .item-num{
            height: rem(64);
            width: rem(180);
            background-color: #3288CE;
            border-radius: rem(6);
            color: #fff;
          }
        }
      }
    }
  }
</style>
